import 'package:flutter/material.dart';
import 'package:terminal_flutter_demo/res/user_daata_list.dart';

// ignore: must_be_immutable
class GridViewPage extends StatelessWidget {
  List _listData = [];

  GridViewPage({super.key}) {
    _listData = userDataList;
  }

  List<Widget> _getListData() {
    // List<Widget> listTiles = [];
    // for (var i = 0; i < userDataList.length; i++) {
    //   var item = userDataList[i];
    //   print(i);
    //   print('${item['avatar_source']}');
    //   listTiles.add(ListTile(
    //     leading: Image.network('${item['avatar_source']}'),
    //     title: Text('${item['nickname']}'),
    //     subtitle: Text('${item['total_likes_count']}'),
    //   ));
    // }
    // return listTiles;

    return userDataList
        .map((item) => (Container(
              decoration: const BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.network('${item['avatar_source']}'),
                  Text('${item['nickname']}')
                ],
              ),
            )))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    // return GridView.count(
    //   padding: const EdgeInsets.all(10),
    //   crossAxisCount: 3, // x轴显示几个item
    //   crossAxisSpacing: 10, // x轴间距
    //   mainAxisSpacing: 10, // y轴间距
    //   childAspectRatio: 1, // 宽/高比
    //   children: _getListData(),
    // );
    // return GridView.extent(
    //   padding: const EdgeInsets.all(10),
    //   maxCrossAxisExtent: 120, // x轴子元素的最大宽度，如果宽度不够平分宽度，等宽显示item
    //   crossAxisSpacing: 10, // x轴间距
    //   mainAxisSpacing: 10, // y轴间距
    //   childAspectRatio: 1, // 宽/高比
    //   children: _getListData(),
    // );

    return GridView.builder(
        itemCount: _listData.length,
        padding: const EdgeInsets.all(10),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // x轴显示几个item
          crossAxisSpacing: 10, // x轴间距
          mainAxisSpacing: 10, // y轴间距
          childAspectRatio: 1, // 宽/高比
        ),
        // gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        //   maxCrossAxisExtent: 120, // x轴子元素的最大宽度，如果宽度不够平分宽度，等宽显示item
        //   crossAxisSpacing: 10, // x轴间距
        //   mainAxisSpacing: 10, // y轴间距
        //   childAspectRatio: 1, // 宽/高比
        // ),
        itemBuilder: (context, index) {
          var item = userDataList[index];
          return Container(
            decoration: const BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.all(Radius.circular(12)),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network('${item['avatar_source']}'),
                Text('${item['nickname']}')
              ],
            ),
          );
        });
  }
}
